<template>
  <CardBox>
    <h3 class="sub-title">基本信息</h3>
    <div>
      <BaseInfo ref="BaseInfoRef" />
    </div>
    <!-- <h3 class="sub-title">联系信息</h3>
    <div>
      <ContactInfo ref="ContactInfoRef" />
    </div> -->
    <FooterBox>
      <el-button
        type="primary"
        :loading="loading"
        @click="createData()"
        >
        保 存
      </el-button>
      <el-button
        @click="resetData()"
        >
        重 置
      </el-button>
    </FooterBox>
  </CardBox>
</template>
<script lang="ts" setup name="Form">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import CardBox from '@/components/CardBox/Index.vue'
import FooterBox from '@/components/FooterBox/Index.vue'
import BaseInfo from './components/BaseInfo.vue'
import ContactInfo from './components/ContactInfo.vue'

const BaseInfoRef = ref(null) 
const ContactInfoRef = ref(null) 

// 保存按钮加载状态
const loading = ref(false)

const dataBase = ref<any>({})

const createData = async () => {
  loading.value = true
  // 字段拼接
  Object.assign(dataBase.value, BaseInfoRef.value.formItem, ContactInfoRef.value.formItem)

  // 表单验证
  const baseValid = await BaseInfoRef.value.baseFormValidate()
  const contactValid = await ContactInfoRef.value.contactFormValidate()
  // const productValid = await planProductRef.value.productFormValidate()
  if (baseValid && contactValid) {
    // 保存接口
    ElMessage.success('保存成功')
    console.log('dataBase', dataBase.value)
    loading.value = false
  } else {
    ElMessage.error('请确认全部信息填写正确！')
    loading.value = false
  }
}

const resetData = () => {
  BaseInfoRef.value.reset()
  ContactInfoRef.value.reset()
}

</script>
<style lang="scss" scoped>

</style>
